<template>
  <q-layout view="hHh Lpr lFf" class="layout-MainLayout">
    <q-header class="topnav">
      <q-toolbar>
        <router-link to="/">
          <img src="logo.png" style="display: block; height: 34px; margin-left: 8px" alt="CCPIT">
        </router-link>
        <div class="topnav-title">全球经贸展览信息系统</div>
        <q-input class="global-search-input xdense" filled dense placeholder="搜索您想使用的功能">
          <template v-slot:prepend>
            <q-icon name="search" color="grey" size="18px" />
          </template>
          <q-menu fit>
            <q-list style="min-width: 100px">
              <q-item>
                <q-item-section>
                  功能暂未开放，敬请期待！
                </q-item-section>
              </q-item>
            </q-list>
          </q-menu>
        </q-input>
        <q-space />
        <div class="need-to-know-banner row items-center no-wrap q-mr-xl">
          <q-icon name="campaign" size="22px" style="margin-right: 3px" />
          <span style="font-size: 15px; letter-spacing: 1px">请勿发布或传播涉密、敏感信息。</span>
        </div>
        <q-btn icon="call" color="primary-text" flat dense padding="3px" class="topnav-btn" style="border-radius: 6px">
          <q-tooltip anchor="bottom middle" self="top middle" transition-show="scale" transition-hide="scale">
            <div class="q-pa-xs">
              <div style="font-size: 13px">技术支持</div>
              <div style="line-height: 1">- - - - - - - - -</div>
              <div style="font-size: 15px">13522418029</div>
            </div>
          </q-tooltip>
        </q-btn>
        <q-btn to="/site/hc/page/quick-start" icon="help_outline" color="primary-text" flat dense padding="3px" class="topnav-btn q-ml-lg" style="border-radius: 6px">
          <q-tooltip anchor="bottom middle" self="top middle" transition-show="scale" transition-hide="scale">帮助中心</q-tooltip>
        </q-btn>
        <q-btn icon="support_agent" color="primary-text" flat dense padding="3px" class="topnav-btn q-ml-lg" style="border-radius: 6px" @click="openSupportAgent">
          <q-tooltip anchor="bottom middle" self="top middle" transition-show="scale" transition-hide="scale">在线客服</q-tooltip>
        </q-btn>
        <q-btn icon="phone_iphone" color="primary-text" flat dense padding="3px" class="topnav-btn q-ml-lg" style="border-radius: 6px" @click="showDownloadTip = false">
          <q-tooltip v-model="showDownloadTip" anchor="bottom middle" self="top middle" transition-show="scale" transition-hide="scale">请使用安卓手机扫码下载App</q-tooltip>
          <q-popup-proxy transition-show="scale" anchor="bottom middle" self="top middle" transition-hide="scale" :offset="[0, 15]">
            <DownloadApp :is-popup="true"/>
          </q-popup-proxy>
        </q-btn>
        <span class="q-mx-md text-separator" style="font-size: 18px">|</span>
        <div v-if="viewer" class="row items-center no-wrap cursor-pointer">
          <UserAvatar :size="32" :user="viewer.staff" />
          <q-icon name="keyboard_arrow_down" size="18px" color="grey" />
          <UserProfileMenu />
        </div>
        <div v-else>
          <q-btn flat to="/auth/login">登录</q-btn>
        </div>
      </q-toolbar>
    </q-header>
    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      bordered
      :mini="isDrawerMini"
      :width="240"
      :breakpoint="500"
      class="bg-white"
    >
      <q-scroll-area style="height: calc(100% - 50px);">
        <q-list padding>
          <EssentialLink
            v-for="link in linksList"
            :key="link.title"
            v-bind="link"
            :mini="isDrawerMini"
          />
        </q-list>
        <q-list 
        style="position: relative; top: -15px;"
        v-if="isDrawerMini==true"
        padding>
          <EssentialLink
            v-for="link in linksList"
            :key="link.title"
            v-bind="link"
          />
        </q-list>
      </q-scroll-area>
      
      <div
      
      class="absolute-bottom text-center q-pa-sm">
        <q-btn
         style="background-color: ghostwhite;
         border: 1px solid ghostwhite;"
          flat
          :icon="isDrawerMini ? 'chevron_right' : 'chevron_left'"
          @click="toggleDrawerMini"
          class="full-width q-mt-sm"
          size="sm"
        >
          <span 
         
          v-show="!isDrawerMini" class="q-ml-sm">收起菜单</span>
          <q-tooltip v-show="isDrawerMini">展开菜单</q-tooltip>
        </q-btn>
      </div>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { authApi } from 'src/api/auth'

import EssentialLink from 'components/EssentialLink.vue'
import UserAvatar from "components/UserAvatar.vue"
import UserProfileMenu from "components/UserProfileMenu.vue"
import { storeToRefs } from 'pinia'
import { useStore } from 'stores/default'

const linksList = [
  {
    title: '展会信息',
    caption: '',
    icon: 'chat',
    link: '/exhibition'
  },
  {
    title: '操作日志',
    caption: '',
    icon: 'school',
    link: '/operation_log'
  }
]

const leftDrawerOpen = ref(false)
const isDrawerMini = ref(false)
const store = useStore()
const { viewer } = storeToRefs(store)

const router = useRouter()

const toggleDrawerMini = () => {
  isDrawerMini.value = !isDrawerMini.value
}

onMounted(async () => {
  try {
    const token = localStorage.getItem('token')
    if (!token) {
      router.push('/auth/login')
      return
    }

    const response = await authApi.checkToken()
    if (response.data.code !== 200) {
      router.push('/auth/login')
      return
    }

    // // 更新用户信息
    store.setUserInfo(response.data.data)
  } catch (error) {
    console.error(error)
    router.push('/auth/login')
  }
})

</script>

<style lang="scss">
.layout-MainLayout {
  & > .topnav {
    color: $primary-text;
    background-color: white;
    box-shadow: 1px 0 6px 0 rgba(39, 54, 78, .12);

    @media print {
      display: none;
    }

    .topnav-title {
      font-size: 16px;
      font-weight: 500;
      margin: 0 16px 0 10px;
    }

    .global-search-input {
      min-width: 320px;

      .q-field__control {
        border-radius: 4px;
      }
    }

    .need-to-know-banner {
      color: #cb7c27;
      font-style: italic;

      .q-icon {
        color: #db8c37;
      }
    }

    .topnav-btn {
      .q-icon {
        font-size: 20px;
      }
    }
  }

  @media print {
    & > .q-drawer-container {
      display: none;
    }
  }

  & > .q-drawer-container > .q-drawer {
    $leftnav-header-height: 58px;
    $leftnav-footer-height: 40px;
    background: #fff;

    .leftnav {
      width: auto !important;
      height: auto !important;
      position: absolute;
      top: 8px;
      right: 0;
      bottom: 8px;
      left: 8px;
      border-radius: 6px;
      background-color: #fff;

      & > .q-scrollarea {
        position: absolute;
        top: $leftnav-header-height;
        right: 0;
        bottom: $leftnav-footer-height;
        left: 0;
        padding: 6px 8px 10px 8px;
      }

      .leftnav-header {
        padding: 12px 8px 8px 12px;

        .org-title {
          font-weight: 500;
          line-height: 1.2;
          font-size: 16px;
          color: black;
        }
      }

      .leftnav-menu-separator {
        border-bottom: 1px solid #f0f0f0;
        margin: 16px 8px;
      }

      .leftnav-menu {
        font-size: 14px;
        margin: 6px 0;

        a {
          text-decoration: none;
        }

        .btn-toggle {
          font-size: 16px;
          padding: 2px;
          color: $grey-5;
          transition: transform .3s;
        }

        &.expanded > .leftnav-menu-item > .btn-toggle {
          transform: rotateZ(180deg);
        }
      }

      .leftnav-menu-item {
        cursor: pointer;
        padding: 6px 6px;
        margin: 6px 0;
        border-radius: 6px;
        color: #000;
        font-size: 15px;
        line-height: 1.2;
        text-decoration: none;

        .leftnav-menu-mini-badge {
          position: absolute;
          top: -7px;
          right: -10px;
          z-index: 1;
          margin-right: 0 !important;
        }

        .leftnav-menu-badge {
          width: 19px;
          height: 19px;
          border-radius: 50%;
          justify-content: center;
          border: 2px solid white;
        }

        &.indent {
          padding-left: 16px;
          padding-right: 27px;
        }

        &:hover {
          background-color: #f6f6f6;
        }

        &.active {
          font-weight: 500;
          color: black;
          background-color: #f6f6f6;

          .icon-slot {
            color: #000
          }
        }

        .icon-slot {
          position: relative;
          width: 26px;
          margin-right: 6px;
          color: #8b8b8b;
        }

        .q-badge {
          background-color: #e5e5e5;
          color: #7b7b7b;
          margin-right: 4px;
        }
      }

      .leftnav-child-menu {
        margin: -7px 0;
        padding: 1px 0;
      }

      .leftnav-footer {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 8px;
        height: $leftnav-footer-height;

        &::before {
          content: '';
          position: absolute;
          top: -1px;
          left: 0;
          right: 0;
          height: 1px;
          background-color: #f0f0f0;
        }
      }

      .btn-toggle-leftnav {
        color: #9b9b9b;
      }
    }

    .leftnav-mini {
      & > .q-scrollarea {
        padding: 6px 0 10px 0;
      }

      .leftnav-header {
        padding: 12px 0 8px 0
      }

      .leftnav-menu-separator {
        border-bottom: 1px solid #f0f0f0;
        margin: 16px 0
      }

      .leftnav-menu {
        width: 30px;
        margin-left: 8px;

        .leftnav-menu-item {
          .icon-slot {
            width: 26px;
            color: #8b8b8b;
          }

          &.active {
            font-weight: 500;
            color: black;
            background-color: #d5d4d4;

            .icon-slot {
              color: #000;
            }
          }
        }
      }
    }
  }

  .arrow-left::before {
    position: absolute;
    top: 0px;
    left: -20px;
    content: "";
    border-left: 0px solid;
    border-right: 30px solid;
    border-bottom: 20px solid;
    transform: rotate(0);
    border-color: transparent rgb(255, 224, 178) transparent transparent;
  }

  @media print {
    .q-page-container {
      padding: 0 !important;
    }
  }

  .tool-box {
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: right .3s ease-in-out;
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1049;
    @media print {
      display: none;
    }
  }

  .tool-box-standby {
    right: -40px;
  }
}

.layout-MainLayout-leftnav-child-menu-container {
  background-color: #fff;
  padding: 0;
  box-shadow: 1px 0 6px 0 rgb(39 54 78 / 12%);

  .leftnav-child-menu {
    padding: 9px 0;

    a {
      text-decoration: none;
    }
  }

  .leftnav-child-menu.popup-menu {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(8, auto);
  }

  .leftnav-menu-item {
    font-size: 14px;
    cursor: pointer;
    padding: 6px 18px;
    color: #3d3d3d;
    min-width: 130px;
    text-decoration: none;

    &:hover {
      background-color: #f6f6f6;
    }

    &.active {
      font-weight: 500;
      color: #2d2d2d;
      background-color: #f6f6f6;
    }

    .icon-slot {
      width: 26px;
      margin-right: 2px;
      color: #909090;
    }

    .q-badge {
      background-color: #e5e5e5;
      color: #7b7b7b;
      margin-right: 4px;
      font-size: 10px;
    }

    .leftnav-menu-badge {
      width: 19px;
      height: 19px;
      border-radius: 50%;
      justify-content: center;
      border: 2px solid white;
    }
  }
}
</style>
